<template>
  <div class="tmpl">
    <h4>{{info.title}}</h4>

    <p class="info">
      <span>发表时间：{{info.add_time | dateFormat}}</span>
      <span>浏览次数：{{info.click}}</span>
    </p>

    <hr>

    <div class="thumbs">
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="index">
    </div>

    <!-- 图片的详细介绍 -->
    <div class="content" v-html="info.content"></div>

    <!-- 评论框组件 -->
    <comment :id="id"></comment>
  </div>
</template>


<script>
// 引入路径配置文件
import config from "../../js/globalConfig.js"
// 引入评论框组件
import comment from "../../components/common/comment.vue"
export default {
  data() {
    return {
      id:this.$route.params.id,
      info: {},
      list: []
    }
  },
  created() {
    // 获取图片详情
    this.getphotoInfo();
    // 获取缩略图
    this.getMiniPhoto();
  },
  methods: {
    getphotoInfo() {
      // console.log(this.id);
      this.$http.get("api/getimageInfo/"+this.id).then(res=>{
        // console.log(res.body);
        if(res.body.status === 0) {
          this.info = res.body.message[0];
        }
      })
    },
    getMiniPhoto() {
      this.$http.get("api/getthumimages/"+this.id).then(res=>{
        // console.log(res.body.message);
        res.body.message.map(val=>{
          val.src = config.imgBaseUrl + val.src;
          val.w = 600;
          val.h = 400;
        })
        // console.log(res.body.message);
        this.list = res.body.message;
      })
    }
  },
  // 注册子组件
  components:{comment}
}
</script>


<style lang = "scss" scoped >
  .tmpl {
    padding: 3px;
  }

  h4 {
    color: #26A2FF;
    text-align: center;
    font-size: 17px;
    margin: 15px 0;
  }

  .info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }

  .content {
    font-size: 14px;
    line-height: 30px;
    text-indent: 2em;
  }

  .thumbs{
    img{
      margin: 10px 12px;
      box-shadow: 0 0 15px #999;
    }
  }
</style>